<template>
  <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    label-width="auto"
    class="demo-ruleForm"
    status-icon
  >
    <!-- 标题 -->
    <el-form-item label="标题：" prop="paymentTitle">
      <el-input v-model="ruleForm.paymentTitle" />
    </el-form-item>
    <!-- 付款金额 -->
    <el-form-item label="付款金额：" prop="paymentMoneys">
      <el-input v-model="ruleForm.paymentMoneys" />
    </el-form-item>
    <!-- 结算方式 -->
    <el-form-item label=" 结算方式：" prop="paymentMoney">
      <!-- <el-input v-model="ruleForm.settlementChargeBillingmethod" /> -->
      <el-radio-group v-model="ruleForm.paymentMoney">
        <el-radio :label="0">微信支付</el-radio>
        <el-radio :label="10">支付宝支付</el-radio>
        <el-radio :label="20">银联支付</el-radio>
        <el-radio :label="30">企业转账</el-radio>
        <el-radio :label="40">线下支付</el-radio>
        <el-radio :label="50">其它</el-radio>
      </el-radio-group>
    </el-form-item>
    <!-- 支付方式 -->
    <el-form-item label=" 支付方式：" prop="paymentManner">
      <el-radio-group v-model="ruleForm.paymentManner">
            <el-radio :label="1">微信</el-radio>
            <el-radio :label="2">支付宝</el-radio>
            <el-radio :label="3">银行卡</el-radio>
      </el-radio-group>
    </el-form-item>
    <!-- 支付对象 -->
    <el-form-item label="支付对象：" prop="paymentWhoPay">
      <el-input v-model="ruleForm.paymentWhoPay" />
    </el-form-item>
    <!-- 开户行 -->
    <el-form-item label="开户行：" prop="paymentBank">
      <el-input v-model="ruleForm.paymentBank" />
    </el-form-item>
    <!-- 银行账户 -->
    <el-form-item label="银行账户：" prop="paymentAccount">
      <el-input v-model="ruleForm.paymentAccount" />
    </el-form-item>
    <!-- 状态 -->
    <el-form-item label=" 状态：" prop="paymentState">
      <el-radio-group v-model="ruleForm.paymentState">
        <!-- 待审批=1,已通过,已拒绝,待提交 -->
          <el-radio :label="1">待审批</el-radio>
          <el-radio :label="2">已通过</el-radio>
          <el-radio :label="3">已拒绝</el-radio>
          <el-radio :label="4">待提交</el-radio>
      </el-radio-group>
    </el-form-item>
    <!-- 付款日期 -->
    <el-form-item label="付款日期：" prop="paymentData">
          <el-date-picker
            v-model="ruleForm.paymentData"
            type="date"
            placeholder="选择日期"
            style="width: 100%"
          />
    </el-form-item>
    <!-- 用途描述 -->
    <el-form-item label="用途描述：" prop="paymentDescription">
      <el-input v-model="ruleForm.paymentDescription" type="textarea" />
    </el-form-item>
    <!-- 备注信息 -->
    <el-form-item label="备  注：" prop="paymentRemark">
        <el-input v-model="ruleForm.paymentRemark" type="textarea" />
    </el-form-item>
    <!-- 提交人 -->
    <el-form-item label="提交人：" prop="paymentApplicant">
        <el-input v-model="ruleForm.paymentApplicant"  />
    </el-form-item>
    <!-- 票据附件 -->
    <el-form-item label=" 票据附件：" prop="paymentTicketAttachments">
         <el-upload
    class="avatar-uploader"
    action="http://localhost:42142/api/Payments/IFileImg"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
  >
    <img v-if="ruleForm.paymentTicketAttachments" :src="ruleForm.paymentTicketAttachments" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload>
    </el-form-item>
    <!-- 修改按钮 -->
    <el-form-item>
      <el-button type="primary" @click="submitForm">
        修改
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMenuItem, type ComponentSize, type FormInstance, type FormRules,ElMessage } from 'element-plus'
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';
import http from '@/Http';
import { Plus } from '@element-plus/icons-vue'

const route = useRoute();
const router = useRouter();

const ruleForm = reactive({
 paymentId:route.query.paymentId,
  paymentTitle: '',
  paymentMoneys: '',
  paymentMoney: '',
  paymentManner: '',
  paymentWhoPay: '',
  paymentBank: '',
  paymentAccount: '',
  paymentData: '',
  paymentDescription: '',
  paymentRemark: '',
  paymentTicketAttachments: '',
   firmId: '',
    userId:'',
  paymentApplicant: '',
  paymentState: '',
   createNames: "",
    createDates: "",
})

// 根据id获取付款信息
const getFindPayment = () => {
    axios.get("Settlementwrite/api/Payments/GetById", {
        params: {
            paymentId: route.query.paymentId
        }
    }).then(res => {
        ruleForm.paymentId = res.data.data.paymentId;
        ruleForm.paymentTitle = res.data.data.paymentTitle;
        ruleForm.paymentMoneys = res.data.data.paymentMoneys;
        ruleForm.paymentMoney = res.data.data.paymentMoney;
        ruleForm.paymentWhoPay = res.data.data.paymentWhoPay;
        ruleForm.paymentBank = res.data.data.paymentBank;
        ruleForm.paymentAccount = res.data.data.paymentAccount;
        ruleForm.paymentData = res.data.data.paymentData;
        ruleForm.paymentDescription = res.data.data.paymentDescription;
        ruleForm.paymentRemark = res.data.data.paymentRemark;
        ruleForm.paymentTicketAttachments = res.data.data.paymentTicketAttachments;
        ruleForm.firmId = res.data.data.firmId;
        ruleForm.userId = res.data.data.userId;
      ruleForm.paymentApplicant = res.data.data.paymentApplicant;
      ruleForm.paymentManner = res.data.data.paymentManner;
      ruleForm.paymentState = res.data.data.paymentState;
      ruleForm.createNames = res.data.data.createNames;
      ruleForm.createDates = res.data.data.createDates;
    })
}

// 上传票据附件成功后的回调函数
const handleAvatarSuccess = (url: any) => {
    ruleForm.paymentTicketAttachments = "http://localhost:42142" + url;
}

// 提交表单
const submitForm = async () => {
      axios.post("Settlementwrite/api/Payments/Update", ruleForm)
        .then(res => {
          if (res.data.data > 0) {
            ElMessage.success('修改成功')
            router.push('/PaymentManageList')
          } else {
             ElMessage.success('修改失败')
          }
        })
}

// 重置表单
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

// 组件挂载后执行
onMounted(() => {
  getFindPayment();
})
</script>
<style>
select {
    width: 200px;
    height: 25px;
    line-height: 25px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
</style>

<style>
.page {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f5f5f5;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.title {
    text-align: center;
    margin-bottom: 20px;
}

.demo-ruleForm {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.el-form-item {
    margin-bottom: 20px;
}

.el-input,
.el-select,
.el-date-editor {
    width: 100%;
}

.el-button {
    margin-right: 10px;
}
</style>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>